<template>
  <el-dialog :title=title
             v-if="open"
             :visible.sync="open"
             :modal=false
             width="80%"
             center
  >
    <div class="app-container">
      <div id="orderVoucherPrintArea" style="border: 1px solid black;">
        <el-row style="text-align: right;margin-top: 20px">
          <el-col :span="16" style="text-align: right;">
            <span class="areaTitle">企业采购单</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px">
            <span class="number"> No: {{ orderVoucher.orderCode }}</span>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="8" style="margin-left: 30px">
            <span>供货商：</span>
            <span>{{ orderVoucher.vendorName }}</span>
          </el-col>
          <el-col :span="8">
            <span>采购计划名称：</span>
            <span>{{ orderVoucher.planName }}</span>
          </el-col>
          <el-col :span="7" style="text-align: center">
            <span>供货日期：</span>
            <span>{{ orderVoucher.materialDeadline }}</span>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="8" style="margin-left: 30px">
            <span>付款方式：</span>
            <span v-if="orderVoucher.paymentType==0">应付账款</span>
            <span v-if="orderVoucher.paymentType==1">现金付款</span>
            <span v-if="orderVoucher.paymentType==2">预付款</span>
          </el-col>
          <el-col :span="8">
            <span>联系人：</span>
            <span>{{ orderVoucher.contact }}</span>
          </el-col>
          <el-col :span="7" style="text-align: center">
            <span>联系人电话：</span>
            <span>{{ orderVoucher.contactTel }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">

          <el-col :span="24" style="margin-left: 30px;margin-right: 30px">
            <table class="my-table" cellspacing="0">
              <thead>
              <tr>
                <th rowspan="2">物料编号</th>
                <th rowspan="2">物料名称</th>
                <th rowspan="2">规格型号</th>
                <th rowspan="2">单位</th>
                <th rowspan="2">分类</th>
                <th rowspan="2">采购数量</th>
                <th rowspan="2">采购单价</th>
                <th colspan="11">采购总价</th>
              </tr>
              <tr>
                <th>亿</th>
                <th>千</th>
                <th>百</th>
                <th>十</th>
                <th>万</th>
                <th>千</th>
                <th>百</th>
                <th>十</th>
                <th>元</th>
                <th>角</th>
                <th>分</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in orderVoucherDetails" :key="index">
                <td>{{ item.itemCode }}</td>
                <td>{{ item.itemName }}</td>
                <td>{{ item.specification }}</td>
                <td>{{ item.unitOfMeasure }}</td>
                <td>{{ item.itemTypeName }}</td>
                <td>{{ item.quantity }}</td>
                <td>{{ item.estimatedUnitPrice }}</td>
                <td>{{ item.totalMoney.yi }}</td>
                <td>{{ item.totalMoney.qw }}</td>
                <td>{{ item.totalMoney.bw }}</td>
                <td>{{ item.totalMoney.sw }}</td>
                <td>{{ item.totalMoney.w }}</td>
                <td>{{ item.totalMoney.q }}</td>
                <td>{{ item.totalMoney.b }}</td>
                <td>{{ item.totalMoney.s }}</td>
                <td>{{ item.totalMoney.y }}</td>
                <td>{{ item.totalMoney.j }}</td>
                <td>{{ item.totalMoney.f }}</td>
              </tr>
              <tr style="height: 50px">
                <td>备注：</td>
                <td colspan="17">{{orderVoucher.remark}}</td>
              </tr>
              <tr style="height: 50px">
                <td>合计（大写）：</td>
                <td colspan="17" style="text-align: left">
                  <span style="font-size: 20px;font-weight: 600">{{orderVoucher.dx}}</span>
                  <span style="margin-left: 500px">(小写)</span>
                  <span style="font-size: 20px;font-weight: 600">￥{{orderVoucher.estimatedCost}}</span></td>
              </tr>
              </tbody>
            </table>
          </el-col>
        </el-row>
        <el-row class="printArea_row">
          <el-col :span="8" style="margin-left: 30px">
            <span>采购单位：</span>
            <span>{{ orderVoucher.purchase }}</span>
          </el-col>
          <el-col :span="5">
            <span>采购人：</span>
            <span>{{ orderVoucher.purchasingPersonnel }}</span>
          </el-col>
          <el-col :span="4" style="text-align: center">
            <span>审核人：</span>
            <span>{{ orderVoucher.reviewer }}</span>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <span>签名：</span>
            <span></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23" style="text-align: right;margin-bottom: 20px;margin-top: 30px">
            <span>单据生成时间：</span>
            <span>{{ orderVoucher.createTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
        <el-button type="info" @click="cancel">返 回</el-button>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getDetail} from "@/api/mes/cg/ordervoucher";
import Nzh from 'nzh';
import printJS from "print-js";


export default {
  name: "infoView",
  data() {
    return {
      open: false,
      title: null,
      // 遮罩层
      loading: true,
      orderVoucher: {},
      orderVoucherDetails: [],
    };
  },
  created() {
    /* this.getList();
     //查询商品表方法
     this.getGoodsList();
     //查询供应商列表方法
     this.getSupplierlist();*/
  },
  methods: {
    init(id) {
      var nzhcn = Nzh.cn;
      getDetail(id).then(response => {
        this.orderVoucher = response.data;
        this.orderVoucher.dx=nzhcn.toMoney(response.data.estimatedCost).replace("人民币","");
        this.orderVoucherDetails = response.data.cgPurchaseOrderVoucherDetailsList;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    print() {
      printJS({
        type: 'html',
        printable: 'orderVoucherPrintArea',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:50px;font-weight: 300;',
        style: `@page{ margin: 250cm 1cm 0cm 1cm; }
                            @media print{@page {size:landscape}}
                            .divider {
                              display: flex; /* 使用Flexbox布局 */
                              align-items: center; /* 垂直居中对齐 */
                              margin: 20px 0; /* 上下外边距 */
                            }

                            .divider::before,
                            .divider::after {
                              content: ""; /* 伪元素内容为空 */
                              flex: 1; /* 伸展占据剩余空间 */
                              border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                            }
                            .label {
                              display: flex;
                              padding: 10px 10px !important;
                              border: 1px solid #d3d3d3; /* 蓝色边框 */
                              border-radius: 10px; /* 圆角 */
                              background-color: #fff; /* 白色背景 */
                              color: #1b9aee; /* 蓝色字体 */
                              font-family: "苹方 常规", "苹方", sans-serif;
                              font-weight: 700;
                              font-style: normal;
                              font-size: 24px;
                              text-align: center;
                              line-height: 20px;
                            }

                            .product-audit {
                              height: 100px !important;
                              margin: 10px 20px 5px 20px !important;
                            }
                            .nav-bar{
                              width: 1500px !important;
                            }
                            .creator{
                              width: 120px !important;
                            }

                            .create-time{
                              width: 250px !important;
                            }

                            .noprint{
                              display:none !important;
                            }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      });
    },
  }
};
</script>

<style scoped>
.areaTitle {
  font-size: 30px;
  margin-right: 17%;
  font-weight: 600;
}

.number {
  font-size: 25px;
  font-weight: 600;
  margin-right: 5%;
}

.printArea_row {
  margin-top: 20px;
  font-size: 20px;
}

.my-table {
  width: 97%;
  text-align: center;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.my-table th {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

.my-table td {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}
</style>

